<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神秘大礼包抽奖系统 - Mystery Gift Box</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: 
                radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%),
                linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* 动态背景粒子 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            animation: float 8s infinite ease-in-out;
        }

        .particle.star {
            width: 6px;
            height: 6px;
            background: radial-gradient(circle, #feca57, transparent);
            animation: starTwinkle 3s infinite ease-in-out;
        }

        .particle.bubble {
            width: 12px;
            height: 12px;
            background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
            animation: bubbleFloat 6s infinite ease-in-out;
        }

        @keyframes starTwinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.5); }
        }

        @keyframes bubbleFloat {
            0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; }
            50% { transform: translateY(-30px) scale(1.2); opacity: 0.8; }
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 10;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部标题 */
        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: titleEntry 1.5s ease-out;
        }

        @keyframes titleEntry {
            0% { transform: translateY(-100px) scale(0.5); opacity: 0; }
            60% { transform: translateY(10px) scale(1.1); opacity: 0.8; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }

        .title {
            font-size: 3.5rem;
            color: #fff;
            margin-bottom: 15px;
            text-shadow: 
                0 0 20px rgba(255,255,255,0.5),
                0 0 40px rgba(254,202,87,0.3);
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 4s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        /* 控制面板 */
        .control-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 25px;
            padding: 35px;
            margin-bottom: 40px;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
            animation: panelSlide 1s ease-out 0.3s both;
            border: 1px solid rgba(255,255,255,0.1);
        }

        @keyframes panelSlide {
            from { transform: translateY(50px) scale(0.9); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        .input-group {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .input-field {
            padding: 18px 25px;
            border: none;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.95);
            font-size: 1.2rem;
            text-align: center;
            outline: none;
            transition: all 0.4s ease;
            min-width: 180px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .input-field:focus {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            background: rgba(255, 255, 255, 1);
        }

        .btn {
            padding: 18px 35px;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.4s ease;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: white;
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 30px rgba(255, 107, 107, 0.6);
        }

        .btn-primary:disabled {
            background: linear-gradient(45deg, #ccc, #999);
            cursor: not-allowed;
            transform: none;
        }

        /* 大礼包主体区域 */
        .gift-area {
            display: flex;
            gap: 40px;
            margin-bottom: 40px;
            animation: giftAreaEntry 1s ease-out 0.6s both;
        }

        @keyframes giftAreaEntry {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .gift-container {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            min-height: 500px;
        }

        /* 神秘大礼包 */
        .mystery-gift-box {
            position: relative;
            width: 300px;
            height: 300px;
            perspective: 1000px;
            transition: all 0.6s ease;
        }

        .gift-box {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s ease;
        }

        .gift-box.opening {
            animation: giftBoxShake 0.5s ease-in-out 3;
        }

        @keyframes giftBoxShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-2deg); }
            75% { transform: rotate(2deg); }
        }

        /* 礼盒底部 */
        .gift-base {
            width: 100%;
            height: 80%;
            background: linear-gradient(135deg, 
                #8B0000 0%, 
                #DC143C 25%, 
                #FF6B6B 50%, 
                #DC143C 75%, 
                #8B0000 100%);
            border-radius: 15px;
            position: absolute;
            bottom: 0;
            box-shadow: 
                0 20px 40px rgba(139, 0, 0, 0.4),
                inset 0 2px 0 rgba(255,255,255,0.3),
                inset 0 -2px 0 rgba(0,0,0,0.3);
            background-size: 200% 200%;
            animation: giftBaseShimmer 3s ease-in-out infinite;
        }

        @keyframes giftBaseShimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* 礼盒盖子 */
        .gift-lid {
            width: 100%;
            height: 30%;
            background: linear-gradient(135deg, 
                #DAA520 0%, 
                #FFD700 25%, 
                #FFF8DC 50%, 
                #FFD700 75%, 
                #DAA520 100%);
            border-radius: 15px 15px 8px 8px;
            position: absolute;
            top: -5%;
            transform-origin: bottom;
            transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 
                0 -5px 20px rgba(218, 165, 32, 0.4),
                inset 0 2px 0 rgba(255,255,255,0.4),
                inset 0 -1px 0 rgba(0,0,0,0.2);
            z-index: 10;
        }

        .gift-lid.opening {
            transform: rotateX(-120deg) translateZ(20px);
        }

        /* 蝴蝶结 */
        .gift-ribbon {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
        }

        .bow {
            width: 60px;
            height: 40px;
            background: linear-gradient(45deg, #FF1493, #FF69B4);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            position: relative;
            animation: bowFloat 2s ease-in-out infinite;
        }

        .bow::before, .bow::after {
            content: '';
            position: absolute;
            width: 35px;
            height: 35px;
            background: linear-gradient(45deg, #FF1493, #FF69B4);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            top: 2px;
        }

        .bow::before {
            left: -25px;
            transform: rotate(-45deg);
        }

        .bow::after {
            right: -25px;
            transform: rotate(45deg);
        }

        @keyframes bowFloat {
            0%, 100% { transform: translateX(-50%) translateY(0px); }
            50% { transform: translateX(-50%) translateY(-5px); }
        }

        /* 礼盒发光效果 */
        .gift-glow {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            background: radial-gradient(circle, 
                rgba(255, 107, 107, 0.3) 0%, 
                rgba(254, 202, 87, 0.2) 40%, 
                transparent 70%);
            border-radius: 25px;
            animation: glowPulse 3s ease-in-out infinite;
            opacity: 0;
        }

        .gift-glow.active {
            opacity: 1;
        }

        @keyframes glowPulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        /* 奖品展示区域 */
        .prize-reveal {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            pointer-events: none;
            transition: all 0.8s ease;
        }

        .prize-reveal.active {
            opacity: 1;
            animation: prizeFloat 2s ease-in-out infinite;
        }

        @keyframes prizeFloat {
            0%, 100% { transform: translateX(-50%) translateY(0px) scale(1); }
            50% { transform: translateX(-50%) translateY(-20px) scale(1.1); }
        }

        .prize-item-display {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
            border-radius: 20px;
            padding: 20px 30px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 2px solid rgba(254,202,87,0.5);
        }

        .prize-emoji {
            font-size: 3rem;
            margin-bottom: 10px;
            animation: emojiSpin 1s ease-in-out;
        }

        @keyframes emojiSpin {
            0% { transform: scale(0) rotate(-180deg); }
            50% { transform: scale(1.3) rotate(0deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        .prize-name {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .prize-subtitle {
            font-size: 1rem;
            color: #666;
        }

        /* 信息面板 */
        .info-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 25px;
            padding: 30px;
            color: white;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .prize-pool, .participant-info {
            margin-bottom: 30px;
        }

        .prize-pool h3, .participant-info h3 {
            margin-bottom: 20px;
            font-size: 1.4rem;
            color: #4ecdc4;
            text-shadow: 0 2px 10px rgba(78, 205, 196, 0.3);
        }

        .prize-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 12px 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            border-left: 4px solid #4ecdc4;
            transition: all 0.3s ease;
        }

        .prize-item:hover {
            background: rgba(255,255,255,0.2);
            transform: translateX(5px);
        }

        /* 魔法粒子效果 */
        .magic-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .magic-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #feca57, transparent);
            border-radius: 50%;
            animation: magicFloat 4s infinite ease-in-out;
        }

        @keyframes magicFloat {
            0% { 
                transform: translateY(100px) scale(0); 
                opacity: 0; 
            }
            20% { 
                opacity: 1; 
                transform: translateY(0px) scale(1); 
            }
            80% { 
                opacity: 1; 
                transform: translateY(-50px) scale(1.2); 
            }
            100% { 
                transform: translateY(-100px) scale(0); 
                opacity: 0; 
            }
        }

        /* 结果显示区域 */
        .result-area {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 25px;
            padding: 35px;
            text-align: center;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            animation: resultEntry 1s ease-out 0.9s both;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
        }

        @keyframes resultEntry {
            from { transform: translateY(50px) scale(0.9); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        .result-display {
            font-size: 2.2rem;
            color: white;
            margin-bottom: 25px;
            text-shadow: 0 2px 15px rgba(0,0,0,0.3);
        }

        /* 中奖庆祝动画 */
        .celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 30% 20%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(78, 205, 196, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(254, 202, 87, 0.2) 0%, transparent 50%),
                rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .celebration-content {
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.95) 0%, 
                rgba(255, 255, 255, 0.85) 100%);
            border-radius: 30px;
            padding: 60px;
            text-align: center;
            color: #333;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.8);
            transform: scale(0);
            animation: celebrationAppear 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            position: relative;
            overflow: hidden;
            border: 3px solid;
            border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #feca57) 1;
        }

        @keyframes celebrationAppear {
            0% { 
                transform: scale(0) rotate(-180deg); 
                opacity: 0; 
            }
            100% { 
                transform: scale(1) rotate(0deg); 
                opacity: 1; 
            }
        }

        .celebration-title {
            font-size: 3.5rem;
            margin-bottom: 25px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #feca57);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: titleGlow 2s ease-in-out infinite;
        }

        @keyframes titleGlow {
            0%, 100% { 
                filter: drop-shadow(0 0 10px rgba(255,107,107,0.5)); 
            }
            50% { 
                filter: drop-shadow(0 0 20px rgba(254,202,87,0.8)); 
            }
        }

        .winner-details {
            font-size: 2.5rem;
            margin: 25px 0;
            font-weight: bold;
            color: #333;
        }

        .close-celebration {
            position: absolute;
            top: 20px;
            right: 25px;
            background: none;
            border: none;
            font-size: 2.5rem;
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }

        .close-celebration:hover {
            color: #333;
        }

        /* 烟花效果 */
        .firework {
            position: fixed;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: fireworkExplode 2s ease-out forwards;
            z-index: 999;
        }

        @keyframes fireworkExplode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(20);
                opacity: 0;
            }
        }

        /* 抽奖历史 */
        .history-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border-radius: 25px;
            padding: 30px;
            margin-top: 30px;
            animation: historyEntry 1s ease-out 1.2s both;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
        }

        @keyframes historyEntry {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .history-list {
            max-height: 300px;
            overflow-y: auto;
            color: white;
        }

        .history-item {
            padding: 15px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: historyItemSlide 0.6s ease-out;
            border-left: 4px solid #4ecdc4;
            transition: all 0.3s ease;
        }

        .history-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }

        @keyframes historyItemSlide {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .title { font-size: 2.5rem; }
            .gift-area { flex-direction: column; }
            .mystery-gift-box { width: 250px; height: 250px; }
            .input-group { flex-direction: column; align-items: stretch; }
            .input-field, .btn { width: 100%; }
            .celebration-content { padding: 40px 30px; }
            .celebration-title { font-size: 2.5rem; }
            .winner-details { font-size: 2rem; }
        }

        /* 加载动画 */
        .loading {
            display: none;
            font-size: 1.8rem;
            color: white;
            animation: loadingPulse 1.5s ease-in-out infinite;
        }

        @keyframes loadingPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.05); }
        }

        /* 音效控制 */
        .audio-control {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
        }

        .audio-btn {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .audio-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <!-- 动态背景粒子 -->
    <div class="particles" id="particles"></div>

    <!-- 音效控制 -->
    <div class="audio-control">
        <button class="audio-btn" id="audioToggle">🔊</button>
    </div>

    <!-- 庆祝动画层 -->
    <div class="celebration-overlay" id="celebrationOverlay">
        <div class="celebration-content" id="celebrationContent">
            <button class="close-celebration" id="closeCelebration">×</button>
            <div class="celebration-title">🎊 恭喜中奖 🎊</div>
            <div class="winner-details" id="celebrationDetails"></div>
            <div style="font-size: 1.5rem; color: #666; margin-top: 20px;">
                幸运女神眷顾了您！愿好运常伴！
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1 class="title">🎁 神秘大礼包抽奖 🎁</h1>
            <p class="subtitle">开启您的专属神秘礼盒，发现意想不到的惊喜！</p>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <div class="input-group">
                <input type="number" class="input-field" id="participantNumber" 
                       placeholder="输入您的幸运编号 (1-100)" min="1" max="100">
                <button class="btn btn-primary" id="startLottery">
                    ✨ 开启神秘礼盒
                </button>
                <button class="btn btn-primary" id="resetSystem" 
                        style="background: linear-gradient(45deg, #e74c3c, #c0392b);">
                    🔄 重置魔法
                </button>
            </div>
        </div>

        <!-- 大礼包区域 -->
        <div class="gift-area">
            <!-- 神秘礼盒容器 -->
            <div class="gift-container">
                <!-- 魔法粒子效果 -->
                <div class="magic-particles" id="magicParticles"></div>
                
                <!-- 神秘大礼包 -->
                <div class="mystery-gift-box" id="mysteryGiftBox">
                    <div class="gift-glow" id="giftGlow"></div>
                    <div class="gift-box" id="giftBox">
                        <div class="gift-base"></div>
                        <div class="gift-lid" id="giftLid"></div>
                        <div class="gift-ribbon">
                            <div class="bow"></div>
                        </div>
                    </div>
                    
                    <!-- 奖品展示 -->
                    <div class="prize-reveal" id="prizeReveal">
                        <div class="prize-item-display">
                            <div class="prize-emoji" id="prizeEmoji"></div>
                            <div class="prize-name" id="prizeName"></div>
                            <div class="prize-subtitle">恭喜获得</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 信息面板 -->
            <div class="info-panel">
                <div class="prize-pool">
                    <h3>🎁 神秘宝藏库</h3>
                    <div class="prize-item">
                        <span>👟 限量运动鞋</span>
                        <span id="shoesCount">20</span>
                    </div>
                    <div class="prize-item">
                        <span>👜 奢华手提包</span>
                        <span id="bagsCount">20</span>
                    </div>
                    <div class="prize-item">
                        <span>👕 设计师衣服</span>
                        <span id="clothesCount">30</span>
                    </div>
                    <div class="prize-item">
                        <span>🧦 精品袜子</span>
                        <span id="socksCount">30</span>
                    </div>
                </div>

                <div class="participant-info">
                    <h3>📊 魔法统计</h3>
                    <div class="prize-item">
                        <span>剩余魔法编号</span>
                        <span id="remainingNumbers">100</span>
                    </div>
                    <div class="prize-item">
                        <span>已开启礼盒</span>
                        <span id="drawnCount">0</span>
                    </div>
                    <div class="prize-item">
                        <span>剩余宝藏</span>
                        <span id="remainingPrizes">100</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 结果显示 -->
        <div class="result-area">
            <div class="result-display" id="resultDisplay">
                ✨ 准备好探索神秘世界了吗？输入您的幸运编号开始魔法之旅！
            </div>
            <div class="loading" id="loadingText">
                🔮 魔法正在施展中，请稍候...
            </div>
        </div>

        <!-- 抽奖历史 -->
        <div class="history-panel">
            <h3 style="color: #4ecdc4; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(78, 205, 196, 0.3);">
                📜 魔法记录册
            </h3>
            <div class="history-list" id="historyList">
                <div style="text-align: center; color: rgba(255,255,255,0.6); font-style: italic;">
                    等待您的第一次魔法之旅...
                </div>
            </div>
        </div>
    </div>

    <!-- 音频文件 -->
    <audio id="bgMusic" loop>
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio>
    <audio id="magicSound">
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio>
    <audio id="celebrationSound">
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio>

    <script>
        // 神秘大礼包抽奖系统
        class MysteryGiftSystem {
            constructor() {
                this.initializeSystem();
                this.bindEvents();
                this.createDynamicParticles();
                this.createMagicParticles();
                this.initializeAudio();
            }

            // 初始化系统数据
            initializeSystem() {
                this.prizes = {
                    shoes: { name: '👟 限量运动鞋', count: 20, emoji: '👟' },
                    bags: { name: '👜 奢华手提包', count: 20, emoji: '👜' },
                    clothes: { name: '👕 设计师衣服', count: 30, emoji: '👕' },
                    socks: { name: '🧦 精品袜子', count: 30, emoji: '🧦' }
                };

                this.usedNumbers = new Set();
                this.lotteryHistory = [];
                this.isDrawing = false;
                this.audioEnabled = true;

                this.updateDisplay();
            }

            // 绑定事件
            bindEvents() {
                document.getElementById('startLottery').addEventListener('click', () => this.openMysteryGift());
                document.getElementById('resetSystem').addEventListener('click', () => this.resetSystem());
                document.getElementById('audioToggle').addEventListener('click', () => this.toggleAudio());
                document.getElementById('closeCelebration').addEventListener('click', () => this.closeCelebration());
                
                // 回车键快速抽奖
                document.getElementById('participantNumber').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') this.openMysteryGift();
                });
            }

            // 创建动态背景粒子
            createDynamicParticles() {
                const particlesContainer = document.getElementById('particles');
                
                // 创建星星粒子
                for (let i = 0; i < 30; i++) {
                    const star = document.createElement('div');
                    star.className = 'particle star';
                    star.style.left = Math.random() * 100 + '%';
                    star.style.top = Math.random() * 100 + '%';
                    star.style.animationDelay = Math.random() * 3 + 's';
                    particlesContainer.appendChild(star);
                }

                // 创建气泡粒子
                for (let i = 0; i < 20; i++) {
                    const bubble = document.createElement('div');
                    bubble.className = 'particle bubble';
                    bubble.style.left = Math.random() * 100 + '%';
                    bubble.style.top = Math.random() * 100 + '%';
                    bubble.style.animationDelay = Math.random() * 6 + 's';
                    particlesContainer.appendChild(bubble);
                }
            }

            // 创建魔法粒子效果
            createMagicParticles() {
                const magicContainer = document.getElementById('magicParticles');
                
                setInterval(() => {
                    if (!this.isDrawing) return;
                    
                    const particle = document.createElement('div');
                    particle.className = 'magic-particle';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 2 + 's';
                    magicContainer.appendChild(particle);

                    setTimeout(() => {
                        particle.remove();
                    }, 4000);
                }, 200);
            }

            // 初始化音频
            initializeAudio() {
                this.bgMusic = document.getElementById('bgMusic');
                this.magicSound = document.getElementById('magicSound');
                this.celebrationSound = document.getElementById('celebrationSound');
                
                // 尝试播放背景音乐
                document.addEventListener('click', () => {
                    if (this.audioEnabled && this.bgMusic.paused) {
                        this.bgMusic.volume = 0.3;
                        this.bgMusic.play().catch(() => {});
                    }
                }, { once: true });
            }

            // 开启神秘礼盒
            async openMysteryGift() {
                if (this.isDrawing) return;

                const numberInput = document.getElementById('participantNumber');
                const participantNumber = parseInt(numberInput.value);

                // 验证输入
                if (!this.validateInput(participantNumber)) return;

                this.isDrawing = true;
                this.updateButtonState(true);
                this.showLoading(true);

                // 播放魔法音效
                if (this.audioEnabled) {
                    this.magicSound.currentTime = 0;
                    this.magicSound.play().catch(() => {});
                }

                // 开始魔法仪式
                await this.performMagicRitual();

                // 抽奖逻辑
                const result = this.drawPrize(participantNumber);
                
                // 展示奖品
                await this.revealPrize(result);

                // 庆祝动画
                await this.showCelebration(result);

                // 更新数据
                this.updateGameData(participantNumber, result);

                this.isDrawing = false;
                this.updateButtonState(false);
                this.showLoading(false);
                numberInput.value = '';
            }

            // 执行魔法仪式
            async performMagicRitual() {
                const giftBox = document.getElementById('giftBox');
                const giftGlow = document.getElementById('giftGlow');
                
                // 激活发光效果
                giftGlow.classList.add('active');
                
                // 礼盒震动
                giftBox.classList.add('opening');
                
                // 等待3秒魔法时间
                await new Promise(resolve => setTimeout(resolve, 3000));
                
                giftBox.classList.remove('opening');
                giftGlow.classList.remove('active');
            }

            // 揭示奖品
            async revealPrize(result) {
                const giftLid = document.getElementById('giftLid');
                const prizeReveal = document.getElementById('prizeReveal');
                const prizeEmoji = document.getElementById('prizeEmoji');
                const prizeName = document.getElementById('prizeName');
                
                // 打开礼盒盖子
                giftLid.classList.add('opening');
                
                // 等待盖子打开
                await new Promise(resolve => setTimeout(resolve, 800));
                
                // 显示奖品
                prizeEmoji.textContent = this.prizes[result.prize].emoji;
                prizeName.textContent = this.prizes[result.prize].name;
                prizeReveal.classList.add('active');
                
                // 创建烟花效果
                this.createFireworks();
                
                // 等待展示时间
                await new Promise(resolve => setTimeout(resolve, 3000));
                
                // 隐藏奖品展示
                prizeReveal.classList.remove('active');
                
                // 关闭礼盒
                setTimeout(() => {
                    giftLid.classList.remove('opening');
                }, 1000);
            }

            // 验证输入
            validateInput(number) {
                if (!number || number < 1 || number > 100) {
                    this.showMessage('请输入有效的魔法编号 (1-100)！', 'error');
                    return false;
                }

                if (this.usedNumbers.has(number)) {
                    this.showMessage('这个魔法编号已经被使用过了！', 'error');
                    return false;
                }

                if (this.getTotalPrizes() === 0) {
                    this.showMessage('所有神秘宝藏都已经被发现了！', 'error');
                    return false;
                }

                return true;
            }

            // 抽奖逻辑
            drawPrize(participantNumber) {
                const availablePrizes = this.getAvailablePrizes();
                if (availablePrizes.length === 0) return null;

                const randomIndex = Math.floor(Math.random() * availablePrizes.length);
                const selectedPrize = availablePrizes[randomIndex];

                return {
                    participantNumber,
                    prize: selectedPrize,
                    timestamp: new Date()
                };
            }

            // 获取可用奖品列表
            getAvailablePrizes() {
                const available = [];
                Object.keys(this.prizes).forEach(key => {
                    const prize = this.prizes[key];
                    if (prize.count > 0) {
                        // 根据数量增加权重
                        for (let i = 0; i < prize.count; i++) {
                            available.push(key);
                        }
                    }
                });
                return available;
            }

            // 显示庆祝动画
            async showCelebration(result) {
                if (!result) return;

                const celebrationOverlay = document.getElementById('celebrationOverlay');
                const celebrationDetails = document.getElementById('celebrationDetails');

                // 设置庆祝内容
                celebrationDetails.innerHTML = `
                    <div style="color: #ff6b6b; font-size: 2rem;">编号 ${result.participantNumber}</div>
                    <div style="color: #4ecdc4; font-size: 2.5rem; margin: 15px 0;">
                        ${this.prizes[result.prize].emoji} ${this.prizes[result.prize].name}
                    </div>
                `;

                // 显示庆祝层
                celebrationOverlay.style.display = 'flex';

                // 播放庆祝音效
                if (this.audioEnabled) {
                    this.celebrationSound.currentTime = 0;
                    this.celebrationSound.play().catch(() => {});
                }

                // 创建更多烟花
                this.createExtendedFireworks();
            }

            // 创建烟花效果
            createFireworks() {
                const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#e74c3c', '#9b59b6'];
                
                for (let i = 0; i < 15; i++) {
                    setTimeout(() => {
                        const firework = document.createElement('div');
                        firework.className = 'firework';
                        firework.style.left = Math.random() * 100 + '%';
                        firework.style.top = Math.random() * 100 + '%';
                        firework.style.background = colors[Math.floor(Math.random() * colors.length)];
                        document.body.appendChild(firework);

                        setTimeout(() => {
                            firework.remove();
                        }, 2000);
                    }, i * 200);
                }
            }

            // 创建扩展烟花效果
            createExtendedFireworks() {
                const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#e74c3c', '#9b59b6'];
                
                for (let i = 0; i < 50; i++) {
                    setTimeout(() => {
                        const firework = document.createElement('div');
                        firework.className = 'firework';
                        firework.style.left = Math.random() * 100 + '%';
                        firework.style.top = Math.random() * 100 + '%';
                        firework.style.background = colors[Math.floor(Math.random() * colors.length)];
                        firework.style.boxShadow = `0 0 20px ${colors[Math.floor(Math.random() * colors.length)]}`;
                        document.body.appendChild(firework);

                        setTimeout(() => {
                            firework.remove();
                        }, 2000);
                    }, i * 100);
                }
            }

            // 关闭庆祝动画
            closeCelebration() {
                const celebrationOverlay = document.getElementById('celebrationOverlay');
                celebrationOverlay.style.display = 'none';
            }

            // 更新游戏数据
            updateGameData(participantNumber, result) {
                // 标记编号已使用
                this.usedNumbers.add(participantNumber);

                // 减少奖品数量
                if (result && this.prizes[result.prize]) {
                    this.prizes[result.prize].count--;
                }

                // 添加到历史记录
                this.lotteryHistory.unshift(result);
                if (this.lotteryHistory.length > 20) {
                    this.lotteryHistory.pop();
                }

                // 更新显示
                this.updateDisplay();
                this.updateHistory();
            }

            // 更新显示信息
            updateDisplay() {
                document.getElementById('shoesCount').textContent = this.prizes.shoes.count;
                document.getElementById('bagsCount').textContent = this.prizes.bags.count;
                document.getElementById('clothesCount').textContent = this.prizes.clothes.count;
                document.getElementById('socksCount').textContent = this.prizes.socks.count;

                document.getElementById('remainingNumbers').textContent = 100 - this.usedNumbers.size;
                document.getElementById('drawnCount').textContent = this.usedNumbers.size;
                document.getElementById('remainingPrizes').textContent = this.getTotalPrizes();
            }

            // 更新历史记录
            updateHistory() {
                const historyList = document.getElementById('historyList');
                
                if (this.lotteryHistory.length === 0) {
                    historyList.innerHTML = '<div style="text-align: center; color: rgba(255,255,255,0.6); font-style: italic;">等待您的第一次魔法之旅...</div>';
                    return;
                }

                historyList.innerHTML = this.lotteryHistory.map((record, index) => `
                    <div class="history-item" style="animation-delay: ${index * 0.1}s;">
                        <div>
                            <strong>魔法编号 ${record.participantNumber}</strong>
                            <div style="font-size: 0.9rem; opacity: 0.8;">
                                ${record.timestamp.toLocaleString()}
                            </div>
                        </div>
                        <div style="font-size: 1.3rem;">
                            ${this.prizes[record.prize].emoji} ${this.prizes[record.prize].name}
                        </div>
                    </div>
                `).join('');
            }

            // 获取剩余奖品总数
            getTotalPrizes() {
                return Object.values(this.prizes).reduce((total, prize) => total + prize.count, 0);
            }

            // 显示消息
            showMessage(message, type = 'info') {
                const resultDisplay = document.getElementById('resultDisplay');
                const originalText = resultDisplay.textContent;
                
                resultDisplay.textContent = message;
                resultDisplay.style.color = type === 'error' ? '#e74c3c' : '#4ecdc4';
                
                setTimeout(() => {
                    resultDisplay.textContent = originalText;
                    resultDisplay.style.color = 'white';
                }, 3000);
            }

            // 更新按钮状态
            updateButtonState(disabled) {
                const button = document.getElementById('startLottery');
                button.disabled = disabled;
                button.textContent = disabled ? '🔮 魔法施展中...' : '✨ 开启神秘礼盒';
            }

            // 显示/隐藏加载动画
            showLoading(show) {
                const loading = document.getElementById('loadingText');
                const resultDisplay = document.getElementById('resultDisplay');
                
                if (show) {
                    loading.style.display = 'block';
                    resultDisplay.style.display = 'none';
                } else {
                    loading.style.display = 'none';
                    resultDisplay.style.display = 'block';
                }
            }

            // 重置系统
            resetSystem() {
                if (confirm('确定要重置魔法世界吗？这将清除所有的魔法记录！')) {
                    this.initializeSystem();
                    this.updateHistory();
                    
                    // 重置礼盒状态
                    document.getElementById('giftLid').classList.remove('opening');
                    document.getElementById('prizeReveal').classList.remove('active');
                    document.getElementById('giftGlow').classList.remove('active');
                    
                    // 关闭庆祝动画
                    this.closeCelebration();
                    
                    this.showMessage('✨ 魔法世界已重置！新的冒险即将开始！', 'info');
                }
            }

            // 切换音效
            toggleAudio() {
                this.audioEnabled = !this.audioEnabled;
                const button = document.getElementById('audioToggle');
                
                if (this.audioEnabled) {
                    button.textContent = '🔊';
                    if (this.bgMusic.paused) {
                        this.bgMusic.play().catch(() => {});
                    }
                } else {
                    button.textContent = '🔇';
                    this.bgMusic.pause();
                }
            }
        }

        // 页面加载完成后初始化系统
        document.addEventListener('DOMContentLoaded', () => {
            new MysteryGiftSystem();
            
            // 添加页面加载动画
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 1.5s ease-in-out';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });

        // 阻止右键菜单
        document.addEventListener('contextmenu', e => e.preventDefault());
    </script>
</body>
</html>
